<!--无限极左侧菜单-->
<link rel="stylesheet" href="js/lay-module/autocomplete/autocomplete.css">
<div class="left-menu-panel">
    <div class="layui-nav layui-nav-tree projectSearceTable" >
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">分类浏览</a>
            <dl class="layui-nav-child">
                <dd>
                        <a class="projects" data-type="projectStatus"  data-typeid="1">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">我的最近浏览</span>
                        <span class="layui-badge">50</span>
                    </a>
                </dd>
                <dd>
                    <a  class="projects" data-type="projectStatus"  data-typeid = "2">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">我关注的项目</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a  class="projects" data-type="projectStatus" data-typeid = "3">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">我的项目[已签约]</span>
                        <span class="layui-badge">2</span>
                    </a>
                </dd>
                <dd>
                    <a  class="projects" data-type="projectStatus" data-typeid = "4">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">我的项目[开发中]</span>
                        <span class="layui-badge">20</span>
                    </a>
                </dd>
                <dd>
                    <a class="projects" data-type="projectStatus" data-typeid = "5">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">所有项目[已签约]</span>
                        <span class="layui-badge" id="signedProjectCount">10</span>
                    </a>
                </dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">项目收藏夹</a>
            <dl class="layui-nav-child">
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">目前重要项目</span>
                        <span class="layui-badge">50</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">开发中项目</span>
                        <span class="layui-badge">50</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">自己主项目</span>
                        <span class="layui-badge">50</span>
                    </a>
                </dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">项目搜索器</a>
        </li>
    </div>
</div>
<div class="right-panel layuimini-page-anim">
    <form class="layui-form layui-user-from" method="post">
        <div class="layui-row">
            <div class="layui-col-md3 layui-col-sm12">
                <div class="layui-form-item">
                    <label class="layui-form-label">项目名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="projectName"   placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3 layui-col-sm12">
                <div class="layui-form-item">
                    <label class="layui-form-label">客户编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="clientId" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">客户联系人编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="clientContactId" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">项目状态</label>
                    <div class="layui-input-block">
                            <select name="user">
                                <option value="">请选择</option>
                                <option value="0">Open</option>
                                <option value="1">Billed</option>
                                <option value="2">Closed</option>
                                <option value="3">Canceled</option>
                            </select>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">时间范围</label>
                    <div class="layui-input-block">
                            <input type="text" name="startDate" id="startId" placeholder="选择时间范围" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">测试input搜索</label>
                    <div class="layui-input-block">
                        <input type="text" name="number" id="end" autocomplete="off" class="layui-input" placeholder="目的地">
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-sm layui-bg-lightblue" lay-submit lay-filter="projectSearch">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">清空</button>
                    </div>
                </div>
            </div>

        </div>
    </form>
    <table class="layui-hide" id="currentTableId" lay-filter="currentTableId" lay-skin="line"></table>
</div>

<script type="text/html" id="projectToolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-xs layui-btn-primary" lay-event="addProject" data-id="111">新增加项目</button>
        <button class="layui-btn layui-btn-xs layui-btn-primary" lay-event="delsProject">批量删除</button>
<!--        <button class="layui-btn layui-btn-xs layui-btn-primary">短信</button>
        <button class="layui-btn layui-btn-xs layui-btn-primary">邮件</button>
        <button class="layui-btn layui-btn-xs layui-btn-primary">加入订单</button>
        <button class="layui-btn layui-btn-xs layui-btn-primary">加入收藏</button>
        <button class="layui-btn layui-btn-xs layui-btn-primary" lay-filter="moreFunction">更多功能</button>-->
    </div>
</script>

<!--<script type="text/html" id="projectStatus">
    {{#  if(d.status == 0){ }}
    <button class="layui-btn layui-btn-xs layui-bg-orange">Open</button>
    {{#  } }}
    {{#  if(d.status == 1){ }}
    <button class="layui-btn layui-btn-xs layui-bg-green">Billed</button>
    {{#  } }}
    {{#  if(d.status == 2){ }}
    <button class="layui-btn layui-btn-xs layui-bg-gray">Closed</button>
    {{#  } }}
    {{#  if(d.status == 3){ }}
    <button class="layui-btn layui-btn-xs layui-bg-black">Canceled</button>
    {{#  } }}
</script>-->
<script type="text/html" id="isPrivate">
    {{#  if(d.isPrivate == 0){ }}
    <button class="layui-btn layui-btn-xs layui-bg-green">是</button>
    {{#  } }}
    {{#  if(d.isPrivate == 1){ }}
    <button class="layui-btn layui-btn-xs layui-bg-gray">否</button>
    {{#  } }}
</script>
<script>
    layui.use(['form', 'table', 'miniPage', 'element', 'laydate', 'dropdown', 'laytpl','autocomplete'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            dropdown = layui.dropdown,
            autocomplete = layui.autocomplete;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        /**
         * 日期范围
         **/
        laydate.render({
            elem: '#startId'
            ,range: true
        });

        /**
         * 日期范围
         **/
        laydate.render({
            elem: '#endId'
            ,range: true
        });

        /**
         * 日期范围
         **/
        laydate.render({
            elem: '#dateRange'
            ,range: true
        });

        autocomplete.render({
            elem: $('#end'),//指定元素
            cache: true,
            url: '/api/project/comp1.json',//请求路径
            response: {code: 'code', data: 'data'},
            template_val: '{{d.id}}',//选中后指定元素显示的值
            template_txt: '{{d.id}}<span class=\'layui-badge layui-bg-gray\'>{{d.englishName}}</span>',//列表显示模板
            onselect: function (resp) {
                //$('#content1').html("NEW RENDER: " + JSON.stringify(resp));
            }
        })

        /**
         * 数据快速查看
         **/
        var tableIns = table.render({
            elem: '#currentTableId',
            url: 'api/project/index.json',
            toolbar: '#projectToolbarDemo', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: [],
            skin: 'line',
            cols: [
                [
                    {type:'checkbox', fixed: 'left'},
                    {field: 'id', align:'center',  title: '项目ID',sort: true},
                    {field: 'projectName', align:'center',title: '项目名称'
                        , templet: function(d){
                            return '<a href="javascrpt:;" layuimini-href="'+ d.url +'" class="color-blue">'+ d.projectName +'</a>'
                        }
                    },
                    {field: 'projectStatus', align:'center', title: '项目状态'},
                    {field: 'clientId', align:'center',  title: '客户编号',sort: true},
                    {field: 'clientContactId', align:'center',  title: '客户联系人编号',sort: true},
                    {field: 'startDate', align:'center',  title: '开始日期',sort: true
                        ,templet : "<div>{{layui.util.toDateString(d.startDate,'yyyy-MM-dd')}}</div>"
                    },
                    {field: 'endDate', align:'center',  title: '结束日期',sort: true},
                    {field: 'isPrivate', align:'center',  title: '是否保密',sort: true,templet: '#isPrivate'},
                    {field: 'ownerBy', align:'center', title: '项目负责人'},
                    {field: 'createBy', align:'center', title: '创建者'},
                    {field: 'createTime',align:'center',  title: '创建日期'},
                    {title: '操作',  fixed: "right", align: "center", templet: function(d){
                            return '<button class="layui-btn layui-btn-xs layui-btn-primary" lay-filter="operation"><i class="fa fa-align-justify"></i></span>';
                        }
                    }
                ]
            ],
            page: true, //开启分页
            request: {
                pageName: 'pageIndex', // page
                limitName: 'pageSize' // limit
            }
            ,response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            },
            done: function(res, curr, count){
                dropdown.suite("[lay-filter='operation']", {
                    align: "right",
                    zIndex: 10000,
                    menus: [
                        {txt: "关注", align: "left", event: "focus"},
                        {txt: "编辑项目", event: "editProject"},
                        {txt: "删除项目", event: "delProject"},
                    ]
                });
            }
        });


        form.on('submit(projectSearch)', function(data){
            data.field.pageIndex = 1;
            tableIns.reload({
                where: data.field
            });
            return false;
        });

        var $ = layui.$, active = {
            projectStatus: function(){
                var _typeId = $(this).data('typeid');
                var _projectCount;
                switch(_typeId){
                    case 5:
                        _projectCount = $("#signedProjectCount").text();
                    break;
                };

                tableIns.reload({
                    where: {
                        typeid:_typeId,
                        projectCount: _projectCount    //传到控制器的签约数条件
                    }
                });
            }
        };

        $('.projectSearceTable .projects').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //工具栏事件
        table.on('toolbar(currentTableId)', function(obj){
            //var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'addProject':
                    var content = miniPage.getHrefContent('page/project/project_client.html');
                    layer.open({
                        title: '选择客户',
                        area:['80%','80%'],
                        type: 1,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        content: content
                    })
                    break;
                case 'delsProject':
                    layer.confirm('确定要删除吗', {icon: 2, title: '提示'}, function (index) {
                        var checkStatus = table.checkStatus('currentTableId')
                            ,data = checkStatus.data;
                        if(data.length == 0){
                            parent.layer.msg('请选择删除的项目', {
                                time: 1000, //1s后自动关闭
                            });
                            return false;
                        }
                        layer.confirm('真的删除项目吗？',{icon: 3, title: '提示'}, function(index){
                            var _projectJson = JSON.stringify(data);
                            <!--此处替换为批量删除接口地址-->
                            $.post('/api/project/del.json', {projectIds:_projectJson}, function (res) {
                                if (res.code == 0) {
                                    parent.layer.msg(res.message, {
                                        time: 1000, //1s后自动关闭
                                    });
                                    location.reload();
                                } else {
                                    parent.layer.msg(res.message, {
                                        time: 1000, //1s后自动关闭
                                    });
                                    return false;
                                }
                            }, "json")
                        });
                    });
                    break;
            };
        });

        //监听工具条
        table.on('tool(currentTableId)', function (obj) {
            var data = obj.data;
            var _projectid  = data.id;
            switch(obj.event){
                case 'editProject':
                    var content = miniPage.getHrefContent('page/project/edit.html');
                    if (content) {
                        var index = layer.open({
                            title: '编辑项目',
                            area:['60%','60%'],
                            type: 1,
                            shade: 0.2,
                            maxmin:true,
                            shadeClose: true,
                            content: content,
                            end: function () {
                                //执行重载
                                table.reload('currentTableId', {
                                    /*page: {
                                        curr: 1 //重新从第 1 页开始
                                    }*/
                                }, 'data');
                            }
                        });
                    }
                    break;
                case "delProject":
                    <!--此处替换为删除接口地址-->
                    layer.confirm('确定要删除吗', {icon: 2, title: '提示'}, function (index) {
                        $.post('/api/project/del.json'+_projectid, {id: _userid}, function (res) {
                            if (res.code == 0) {
                                parent.layer.msg(res.message, {
                                    time: 1000, //1s后自动关闭
                                });
                                location.reload();
                            } else {
                                parent.layer.msg(res.message, {
                                    time: 2000, //2s后自动关闭
                                });
                                layer.closeAll();
                            }
                        }, "json")
                    });
            }
        });

    });
</script>
